<template>
    <div class="stap1">
        <!-- 头部标题 -->
        <header>
            <van-nav-bar title="" left-text="返回" :border="false" left-arrow >
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" color="black" size="20" />
                </template>
                <template #title>
                    <h3>嗨购注册</h3>
                </template>
            </van-nav-bar>
        </header>
        <!-- 用户注册表单 -->
        <main>
            <div class="fromLogin">
                <p class="line"><router-link :to="{ name: 'country', params: {back: 'register'} }">+{{ pho }}<van-icon name="arrow-down" /></router-link><input type="text" name="" id="" class="tel" v-model="tel" placeholder="请输入手机号"></p>
                <p>
                    <van-button color="linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)" :disabled="flag" @click="changeState" :round="true" size="large">
                    下一步
                    </van-button>
                </p>
            </div>
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.fromLogin
    display flex
    flex-direction column
    .line
        border-bottom 1px solid rgb(239,239,239)
        margin-bottom: 1.875rem
        display flex
        width 100%
        margin: 2.5rem 0 3.75rem
        align-items: center
        a
            min-width 3.125rem
            font-size 1rem
            color black
            margin-right .3125rem
            display flex
            justify-content: space-around
        .tel
            flex 1
            border 0
            height 3.125rem
.stap1 main
    padding 0 1.25rem
</style>
<script>
import Vue from 'vue'
import { getDocheckPhone } from '@/api/User.js'
import { NavBar, Button, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Dialog)
export default {
  data () {
    return {
      tel: '',
      pho: 86
    }
  },
  methods: {
    changeState () {
      getDocheckPhone({ tel: this.tel })
        .then((res) => {
          if (res.code === '200') {
            localStorage.setItem('userId', this.tel)
            this.$router.push('/register/stap2')
          } else {
            Dialog.confirm({
              message: '该手机号已经绑定以上京东帐号，请确认是否是你的帐号',
              confirmButtonText: '是我的，立即登录',
              cancelButtonText: '换手机号注册'
            })
              .then(() => {
                // on confirm
                this.$router.push('/login')
              })
              .catch(() => {
                // on cancel
                this.tel = ''
              })
          }
        })
    }
  },
  mounted () {
    this.pho = this.$route.params.phoid ? this.$route.params.phoid : 86
  },
  computed: {
    flag () {
      if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.tel)) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
